<!-- 首页 -->
<template>
    <div class="box">
        <div class="top">
            <p>诺贝尔自然科学奖
                <span>
                    (物理、化学、生理或医学）是标志性科技创新成果的重要表现，是评估国家科技实力的重要指标。诺贝尔自然科学奖知识库，支持对诺奖得主地理分布、国家迁移、师承关系、学术图谱、成长规律等的挖掘和计量分析，支持对获奖与政治经济、研发投入、教育水平等社会环境因素之间关系的研究与揭示，为科技史及相关领域研究提供知识服务和工具平台支撑。
                </span>
            </p>
        </div>
        <div class="middle">
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>3个</h2>
                    <p>奖项</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>334次</h2>
                    <p>颁奖次数</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>634位</h2>
                    <p>诺奖得主</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>3</h2>
                    <p>获奖得主成果</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>3</h2>
                    <p>诺奖研究专著</p>
                </div>
            </div>
        </div>


        <div class="bottom">
            <div class="btm_left">
                <p :class="{ active: active == item.name }" v-for="item in queryList" :key="item.name"
                    @click="search(item)">{{ item.name }}</p>
            </div>
            <div class='chart' id='geo_echarts' v-loading="chartLoading">

            </div>
        </div>
    </div>
</template>
<script>
import { overviewOfWinnerCountry } from "@/api/home";
import * as echarts from 'echarts';
// import echarts from 'echarts';
import { initMap, } from "./index";
export default {
    data () {
        return {
            chartLoading: true,
            geographicalMap: [],//地图数据
            active: "全部",
            queryList: [
                { name: "全部", key: '' },
                { name: "物理学", key: 'Physics' },
                { name: "化学", key: 'Chemistry' },
                { name: "生物学或医学", key: 'Physiology or Medicine' }
            ],
            //查询参数
            queryParams: {
                category: null,
            },
        }
    },
    mounted () {

        this.getOverviewOfWinnerCountry()

        // setTimeout(() => {

        //     initMap(this.geographicalMap);
        // }, 3000);
        // this.$nextTick(() => {
        // })
    },
    computed: {

    },
    created () {

    },
    methods: {
        search (item) {
            this.active = item.name
            this.queryParams.category = item.key
            this.getOverviewOfWinnerCountry(null, this.geographicalMap)
        },
        getOverviewOfWinnerCountry () {
            this.chartLoading = true
            overviewOfWinnerCountry(this.queryParams).then((res) => {
                this.geographicalMap = res.body
                this.drawChart(null, res.body)
                // initMap(this.geographicalMap);

                this.chartLoading = false
            })
        },

        drawChart (name, data) {
            let chartdata = data
            // 基于准备好的dom，初始化echarts实例
            let chart = echarts.init(document.getElementById('chart'))
            // 监听屏幕变化自动缩放图表
            window.addEventListener('resize', function () {
                chart.resize()
            })
            // 绘制图表
            chart.setOption({
                // 图表主标题
                // title: {
                //     text: '世界地图', // 主标题文本，支持使用 \n 换行
                //     top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                //     left: 'center', // 值: 'left', 'center', 'right' 同上
                //     textStyle: { // 文本样式
                //         fontSize: 24,
                //         fontWeight: 600,
                //         color: '#000'
                //     }
                // },
                grid: {
                    width: '100%',
                    height: '100%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                // 提示框组件
                tooltip: {
                    trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                    // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                    // 使用函数模板  传入的数据值 -> value: number | Array
                    formatter: function (data) {
                        if (data == null) return;
                        chartdata.forEach(element => {
                            if (data.name == element.country) {
                                data.count = element.count
                            }
                        });
                        if (data.count) {
                            return data.name + ': ' + data.count + '人'
                        } else {
                            return data.name + ': 0人'
                        }
                    }
                },
                // 视觉映射组件
                // visualMap: {
                //     min: 0,
                //     max: 10000,
                //     text: ['max', 'min'],
                //     realtime: false,
                //     calculable: true,
                //     color: ['#0064d0', '#c3e0ff'],
                // },
                series: [
                    {
                        type: 'map', // 类型
                        // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                        name: '世界地图',
                        mapType: 'world', // 地图类型
                        // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                        roam: false,
                        // 图形上的文本标签
                        label: {
                            show: false // 是否显示对应地名
                        },
                        zoom: 1.2,
                        // 地图区域的多边形 图形样式
                        itemStyle: {
                            // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                            areaColor: 'red',
                            borderWidth: 0.5, // 描边线宽 为 0 时无描边
                            borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                            borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                        },
                        // 高亮状态下的多边形和标签样式
                        emphasis: {
                            label: {
                                show: true, // 是否显示标签
                                color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                            },
                            itemStyle: {
                                areaColor: '#FF6347' // 地图区域的颜色
                            }
                        },
                        // 自定义地区的名称映射
                        // nameMap: data.country,
                        // 地图系列中的数据内容数组 数组项可以为单个数值
                        data: []
                    },
                    {
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        zlevel: 2,

                        rippleEffect: {
                            //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: "fill", //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {

                                show: true,
                                position: "right", //显示位置
                                offset: [5, 0], //偏移设置
                                formatter: "{b}" //圆环显示文字
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        symbol: "circle",

                        symbolSize: function (val) {
                            // console.log(val);
                            return val * 100; //圆环大小
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                            }
                        },
                        data: chartdata.map(function (chartdata) {
                            // console.log(chartdata);
                            return {
                                name: chartdata.country,
                                value: chartdata.count
                            };
                        })
                    },


                ]
            })
        }
    }

}
</script>


<style scoped lang='less'>
.box {
    width: 1200px;
}

.home {
    background: red;
}

.top p {
    width: 828px;
    height: 197px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 44px;
}

.top p span {
    width: 828px;
    height: 197px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 44px;
}

.top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: url(../../assets/backimg.jpg) no-repeat center center;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
}

.box {
    width: 100%;
    height: 100%;
}

.center {
    width: 230px;
    height: 80px;
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    /* justify-content: center; */
    padding-left: 30px;
    box-sizing: border-box;
    align-items: center;
}

.center img {
    width: 50px;
    height: 50px;
    margin-right: 30px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: -60px;
}

.bottom {
    width: 1200px;
    background: #F5FFD9;
    height: 368px;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    box-sizing: border-box;
}

.btm_left {
    box-sizing: border-box;
    width: 175px;
    height: 328px;
    background: #D5E9A0;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.btm_left p {
    padding-left: 20px;
    width: 175px;
    height: 40px;
    /* background: #FFFFFF; */
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;

}

.chart {
    background: #D5E9A0;
    width: 745px;
    height: 328px;
}

.active {
    width: 175px;
    height: 40px;
    background: #FFFFFF;
}

.content h2 {
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #3E5215;
}

.content p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
}
</style>
